<template>
  <div style="height: 100%; overflow: hidden">
    <div class="container container2" v-if="pageData.biaoji == 0" style="flex-wrap: wrap">
      <div class="main-container">
        <div
          style="width: 28%"
          class="container-one"
          :style="{ height: ribaobiaoji + 'px' }"
          v-if="
            permissionStore.hasPermisson('zcbbrb.jtztb') ||
            permissionStore.hasPermisson('zcbbrb.jtcldtb') ||
            permissionStore.hasPermisson('zcbbrb.ddclmxb') ||
            permissionStore.hasPermisson('zcbbrb.zccl') ||
            permissionStore.hasPermisson('zcbbrb.bzlccl') ||
            permissionStore.hasPermisson('zcbbrb.yjktl') ||
            permissionStore.hasPermisson('zcbbrb.jtxl')
          "
        >
          <table class="tableClass">
            <tr>
              <td style="width: 15%">
                <div style="height: 40%; width: 6px; background-color: #018eed"></div>
              </td>
              <td style="width: 70%; border-bottom: 1px solid #f4f5f8"
                >日报
                <img
                  @click="shousuo('日报')"
                  src="../../../src/assets/shouqi.ico"
                  style="width: 20px; height: 20px; float: right"
                  :style="{ transform: ribao ? 'rotate(-90deg)' : 'rotate(90deg)' }"
                  alt=""
                />
              </td>
              <td style="width: 15%"></td>
            </tr>
          </table>
          <div style="overflow: auto; width: 100%; height: 250px" v-if="ribao">
            <div
              v-if="permissionStore.hasPermisson('zcbbrb.jtztb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/MachineCondition')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <IconFont
                  type="icon-jitaizhuangtaibiao"
                  style="width: 60px; height: 60px"
                ></IconFont>
              </div>
              机台动态表
            </div>
            <div
              v-if="permissionStore.hasPermisson('zcbbrb.jtcldtb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/MachineProductCondition')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/MachineMoving.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-jitaichanliangdongtaibiao" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              机台产量动态表
            </div>
            <div
              v-if="permissionStore.hasPermisson('zcbbrb.ddclmxb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/PlanOrderOutputDetail')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/OrderDetail.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-dingdanchanliangmingxibiao" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              <label>订单产量明细表</label>
            </div>
            <div
            v-if="permissionStore.hasPermisson('zcbbrb.zcscrbb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/zcscr')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/OrderDetail.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-dingdanchanliangmingxibiao" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              <label>织厂生产日报表</label>
            </div>
            <div
              v-if="permissionStore.hasPermisson('zcbbrb.zzclrbb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/productionWeaveDaily')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/OrderDetail.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-zhizaochanliangribaobiao1" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              <label>织造产量日报表</label>
            </div>
            <!-- <div v-if="permissionStore.hasPermisson('zcbbrb.zccl')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('19')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-zhichangchanliang" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            织厂产量
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbrb.bzlccl')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('20')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-banzuloucengchanliang" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            班组楼层产量
                        </div> -->
          </div>
        </div>
        <div style="width: 27%" class="container-one" :style="{ height: pandianbiaoji + 'px' }">
          <table class="tableClass">
            <tr>
              <td style="width: 20%">
                <div
                  style="height: 40%; width: 6px; background-color: #018eed; margin: 0px auto"
                ></div>
              </td>
              <td style="width: 60%; border-bottom: 1px solid #f4f5f8"
                >盘点
                <img
                  @click="shousuo('盘点')"
                  src="../../../src/assets/shouqi.ico"
                  style="width: 20px; height: 20px; float: right"
                  :style="{ transform: pandian == true ? 'rotate(-90deg)' : 'rotate(90deg)' }"
                  alt=""
                />
              </td>
              <td style="width: 20%"></td>
            </tr>
          </table>
          <div style="width: 100%; height: 120px" v-if="pandian">
            <div style="justify-content: space-around">
              <!-- <div  @click="jinru('9')" style="text-align:center;cursor:pointer;" :span="24">
                         <div style="width:80%;height:70px;margin:0px auto;">
                              <img src="../../assets/YuliaoPan.png" style="width:60px;height:60px" alt="">
                           </div>
                        余料盘点结存表
                      </div> -->
            </div>
          </div>
        </div>
        <div
          style="width: 40%"
          class="container-one"
          :style="{ height: jincunxiaobiaoji + 'px' }"
          v-if="
            permissionStore.hasPermisson('zcbbjxc.ycljxc') ||
            permissionStore.hasPermisson('zcbbjxc.yljcb') ||
            permissionStore.hasPermisson('zcbbjxc.ylyjb') ||
            permissionStore.hasPermisson('zcbbjxc.pbrjb') ||
            permissionStore.hasPermisson('zcbbjxc.pbyjb') ||
            permissionStore.hasPermisson('zcbbjxc.cpcybb') ||
            permissionStore.hasPermisson('zcbbjxc.wjcybb') ||
            permissionStore.hasPermisson('zcbbjxc.cbcbb') ||
            permissionStore.hasPermisson('zcbbjxc.zcwip')
          "
        >
          <table class="tableClass">
            <tr>
              <td style="width: 5%">
                <div
                  style="height: 40%; width: 6px; background-color: #018eed; margin: 0px auto"
                ></div>
              </td>
              <td style="width: 90%; border-bottom: 1px solid #f4f5f8"
                >进存销
                <!-- <icon-download @click="shousuo('进存销')" style="color:#018EED;font-size:20px;float:right" /> -->
                <img
                  @click="shousuo('进存销')"
                  src="../../../src/assets/shouqi.ico"
                  style="width: 20px; height: 20px; float: right"
                  :style="{ transform: jincunxiao == true ? 'rotate(-90deg)' : 'rotate(90deg)' }"
                  alt=""
                />
              </td>
              <td style="width: 5%"></td>
            </tr>
          </table>

          <div style="width: 100%; height: 120px" v-if="jincunxiao">
            <div
              v-if="permissionStore.hasPermisson('zcbbjxc.yljcb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/SurplusMaterialBalance')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <IconFont type="icon-yuliaojiecunbiao" style="width: 60px; height: 60px"></IconFont>
              </div>
              余料结存表
            </div>
            <div
              v-if="permissionStore.hasPermisson('zcbbjxc.ylyjb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/SurplusMaterialmonth')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/YuYuejie.png" style="width:60px;height:60px" alt=""> -->
                <!-- <img src="../../assets/YuYuejie.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-yuliaoyuejiebiao" style="width: 60px; height: 60px"></IconFont>
              </div>
              余料月结表
            </div>
            <!-- <div @click="jinru('3')" style="text-align:center;cursor:pointer;" :span="6">
                       <div style="width:80%;height:70px;margin:0px auto;">
                         <img src="../../assets/YuliaoTong.png" style="width:60px;height:60px" alt="">
                       </div>
                    余料统计表
                  </div> -->
            <div
              v-if="permissionStore.hasPermisson('zcbbjxc.pbrjb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/GreyDay')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/Piburi.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-piburijiebiao" style="width: 60px; height: 60px"></IconFont>
              </div>
              坯布日结表
            </div>
            <div
              v-if="permissionStore.hasPermisson('zcbbjxc.pbyjb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/Greyclothmonth')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/Pibuyue.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-pibuyuejiebiao" style="width: 60px; height: 60px"></IconFont>
              </div>
              坯布月结表
            </div>
            <!-- <div v-if="permissionStore.hasPermisson('zcbbjxc.cpcybb')" class="IconFont" @click="jinru('5')"
                            style="text-align: center; cursor: pointer" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <img src="../../assets/ChengpingCang.png" style="width:60px;height:60px" alt="">
                                <IconFont type="icon-chengpincangyuebaobiao" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            成品仓月报表
                        </div> -->
            <div
              v-if="permissionStore.hasPermisson('zcbbjxc.wjcybb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/HardwareWarehouseMonthReport')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/WujinCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-wujincangbaobiao" style="width: 60px; height: 60px"></IconFont>
              </div>
              五金进销存
            </div>
            <div
              v-if="permissionStore.hasPermisson('zcbbjxc.cbcbb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/SecondaryGreymonth')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont
                  type="icon-cibucangyuebaobiao"
                  style="width: 60px; height: 60px"
                ></IconFont>
              </div>
              次布仓报表
            </div>
            <div
              v-if="permissionStore.hasPermisson('zcbbjxc.pbjccfycxbb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/GreyFabricFeeQuery')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont
                  type="icon-pibushengchandanjiedianchaxun"
                  style="width: 60px; height: 60px"
                ></IconFont>
              </div>
              坯布进出仓单费用查询
            </div>
            <!-- <div v-if="permissionStore.hasPermisson('zcbbjxc.zcwip')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('17')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt="">
                                <IconFont type="icon-zhichangWIP" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            织厂WIP
                        </div> -->
          </div>
        </div>
      </div>

      <div class="main-container2">
        <div
          style="width: 44%"
          class="container-two"
          :style="{ height: QCbiaoji + 'px' }"
          v-if="
            permissionStore.hasPermisson('zcbbqc.cbl/jdljb') ||
            permissionStore.hasPermisson('zcbbqc.csxsjxxl')
          "
        >
          <table class="tableClass">
            <tr>
              <td style="width: 5%">
                <div
                  style="height: 40%; width: 6px; background-color: #018eed; margin: 0px auto"
                ></div>
              </td>
              <td style="width: 90%; border-bottom: 1px solid #f4f5f8"
                >QC
                <img
                  @click="shousuo('QC')"
                  src="../../../src/assets/shouqi.ico"
                  style="width: 20px; height: 20px; float: right"
                  :style="{ transform: QC == true ? 'rotate(-90deg)' : 'rotate(90deg)' }"
                  alt=""
                />
              </td>
              <td style="width: 5%"></td>
            </tr>
          </table>
          <!-- <div style="width: 100%; height: 120px; " v-if="QC">
                        <div v-if="permissionStore.hasPermisson('zcbbqc.cbl/jdljb')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('15')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-cibushuai-jiangdengshuaijibiao" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            疵布率/降等率计表
                        </div>
                        <div v-if="permissionStore.hasPermisson('zcbbqc.csxsjxxl')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('16')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-chaishaxieshajixiuxiaoshuai" style="width: 60px; height: 60px">
                                </IconFont>
                            </div>
                            拆纱卸纱机修效率
                        </div>
                    </div> -->
        </div>
        <div
          style="width: 53%"
          class="container-two"
          :style="{ height: yewubiaoji + 'px' }"
          v-if="
            permissionStore.hasPermisson('zcbbyw.dddtb') ||
            permissionStore.hasPermisson('zcbbyw.scjdcx') ||
            permissionStore.hasPermisson('zcbbyw.ddzjl')
          "
        >
          <table class="tableClass">
            <tr>
              <td style="width: 5%">
                <div
                  style="height: 40%; width: 6px; background-color: #018eed; margin: 0px auto"
                ></div>
              </td>
              <td style="width: 90%; border-bottom: 1px solid #f4f5f8"
                >业务
                <img
                  @click="shousuo('业务')"
                  src="../../../src/assets/shouqi.ico"
                  style="width: 20px; height: 20px; float: right"
                  :style="{ transform: yewu == true ? 'rotate(-90deg)' : 'rotate(90deg)' }"
                  alt=""
                />
              </td>
              <td style="width: 5%"></td>
            </tr>
          </table>
          <div style="width: 100%; height: 120px" v-if="yewu">
            <div
              v-if="permissionStore.hasPermisson('zcbbyw.dddtb')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/PlanOrderInfo')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/OrderMoving.png" style="width:60px;height:60px" alt=""> -->
                <IconFont
                  type="icon-dingdandongtaibiao"
                  style="width: 60px; height: 60px"
                ></IconFont>
              </div>
              订单动态表
            </div>
            <div
              v-if="permissionStore.hasPermisson('zcbbyw.scjdcx')"
              class="IconFont"
              @click="onClickRouter('/BIbaobiao/ProductionInfo')"
              style="text-align: center; cursor: pointer"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/Productprocess.png" style="width:60px;height:60px" alt=""> -->
                <IconFont
                  type="icon-shengchanjinduchaxun"
                  style="width: 60px; height: 60px"
                ></IconFont>
              </div>
              生产进度查询
            </div>
            <!-- <div v-if="permissionStore.hasPermisson('zcbbyw.ddzjl')" class="IconFont"
                            style="text-align: center; cursor: pointer" @click="jinru('18')" :span="6">
                            <div style="width: 80%; height: 70px; margin: 0px auto">
                                <IconFont type="icon-dingdanzhunjiaoshuai" style="width: 60px; height: 60px"></IconFont>
                            </div>
                            订单准交率
                        </div> -->
          </div>
        </div>
      </div>
      <div class="main-container3">
        <div style="width: 100%" class="container-s" :style="{ height: 320 + 'px' }">
          <table class="tableClass">
            <tr>
              <td style="width: 3%">
                <div style="height: 40%; width: 6px; background-color: #018eed"></div>
              </td>
              <td style="width: 85%; border-bottom: 1px solid #f4f5f8"
                >BI
                <img
                  @click="shousuo('BI')"
                  src="../../../src/assets/shouqi.ico"
                  style="width: 20px; height: 20px; float: right"
                  :style="{ transform: Bibao ? 'rotate(-90deg)' : 'rotate(90deg)' }"
                  alt=""
                />
              </td>
              <td style="width: 12%"></td>
            </tr>
          </table>
          <div
            style="overflow: auto; width: 100%; position: relative; top: 15px; display: flex"
            v-if="Bibao"
          >
            <div
              v-if="permissionStore.hasPermisson('zcbbjxc.ycljxc')"
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/Rawmaterialstorage/Rawmaterialstorage')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-yuancailiaojinxiaocun" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              原材料进销存
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-jitaixiaoshuai" style="width: 60px; height: 60px"></IconFont>
              </div>
              机台效率
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index2')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
              </div>
              圆机开台率
            </div>

            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index5')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont
                  type="icon-dingdanzhunjiaoshuai"
                  style="width: 60px; height: 60px"
                ></IconFont>
              </div>
              订单准交率
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index6')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont
                  type="icon-cibushuai-jiangdengshuaijibiao"
                  style="width: 60px; height: 60px"
                >
                </IconFont>
              </div>
              疵布率/降等率
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index7')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-zhichangWIP" style="width: 60px; height: 60px"></IconFont>
              </div>
              历史WIP
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index8')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-zhichangWIP" style="width: 60px; height: 60px"></IconFont>
              </div>
              实时WIP
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index9')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-chaishaxieshajixiuxiaoshuai" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              拆纱卸纱机修效率
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index10')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-chaishaxieshajixiuxiaoshuai" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              原纱库存
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index11')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont
                  type="icon-zhichangchanliang"
                  style="width: 60px; height: 60px"
                ></IconFont>
              </div>
              织厂产量
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index12')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-banzuloucengchanliang" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              班组楼层产量
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index13')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-banzuloucengchanliang" style="width: 60px; height: 60px">
                </IconFont>
              </div>
              坯布库存
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index14')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
              </div>
              圆机状态
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index15')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
              </div>
              吨布漏验次数
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index16')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
              </div>
              产值工资率
            </div>
            <div
              class="IconFont"
              style="text-align: center; cursor: pointer"
              @click="onClickRouter('/BIbaobiao/index17')"
              :span="6"
            >
              <div style="width: 80%; height: 70px; margin: 0px auto">
                <!-- <img src="../../assets/CibuCang.png" style="width:60px;height:60px" alt=""> -->
                <IconFont type="icon-yuanjizhuangtai" style="width: 60px; height: 60px"></IconFont>
              </div>
              吨布五金
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 原料进存销 -->
    <div v-if="pageData.biaoji == 1" style="height: 100%; width: 100%">
      <Rawmaterialstorage :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></Rawmaterialstorage>
    </div>
        <!-- 余料结存表 -->
    <div v-if="pageData.biaoji == 3" style="height: 100%; width: 100%">
      <SurplusMaterialBalance :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </SurplusMaterialBalance>
    </div>
    <!-- 余料月结表 -->
    <div v-if="pageData.biaoji == 2" style="height: 100%; width: 100%">
      <SurplusMaterialmonth :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </SurplusMaterialmonth>
    </div>
    <!-- 坯布日结表 -->
    <div v-if="pageData.biaoji == 4" style="height: 100%; width: 100%">
      <GreyDay :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></GreyDay>
    </div>
    <!-- 成品仓月报表 -->
    <div v-if="pageData.biaoji == 5" style="height: 100%; width: 100%">
      <FinishedWarehouseMonth :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </FinishedWarehouseMonth>
    </div>
    <!-- 五金仓月报表 -->
    <div v-if="pageData.biaoji == 6" style="height: 100%; width: 100%">
      <HardwareWarehouseMonthReport :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </HardwareWarehouseMonthReport>
    </div>
    <!-- 次布仓报表 -->
    <div v-if="pageData.biaoji == 7" style="height: 100%; width: 100%">
      <SecondaryGreymonth :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></SecondaryGreymonth>
    </div>
    <!-- 坯布月结表 -->
    <div v-if="pageData.biaoji == 8" style="height: 100%; width: 100%">
      <Greyclothmonth :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></Greyclothmonth>
    </div>
    <!-- 机台动态表 -->
    <div v-if="pageData.biaoji == 10" style="height: 100%; width: 100%">
      <MachineCondition :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></MachineCondition>
    </div>
    <!-- 机台产量动态表 -->
    <div v-if="pageData.biaoji == 11" style="height: 100%; width: 100%">
      <MachineProductCondition :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </MachineProductCondition>
    </div>
    <!-- 订单产量明细表 -->
    <div v-if="pageData.biaoji == 12" style="height: 100%; width: 100%">
      <PlanOrderOutputDetail :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </PlanOrderOutputDetail>
    </div>
    <!-- 订单动态表 -->
    <div v-if="pageData.biaoji == 13" style="height: 100%; width: 100%">
      <PlanOrderInfo :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></PlanOrderInfo>
    </div>
    <!-- 生产进度查询 -->
    <div v-if="pageData.biaoji == 14" style="height: 100%; width: 100%">
      <ProductionInfo :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></ProductionInfo>
    </div>
    <!--  疵布率/降等率计表   -->
    <div v-if="pageData.biaoji == 15" style="height: 100%; width: 100%">
      <MeterOfClothRateDrop :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </MeterOfClothRateDrop>
    </div>
    <!-- 拆纱卸纱机修效率   -->
    <div v-if="pageData.biaoji == 16" style="height: 100%; width: 100%">
      <DismantlingMachineRepairEfficiency :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </DismantlingMachineRepairEfficiency>
    </div>
    <!-- 织厂WIP   -->
    <div v-if="pageData.biaoji == 17" style="height: 100%; width: 100%">
      <WeavingFactoryWIP :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></WeavingFactoryWIP>
    </div>
    <!-- 订单准交率   -->
    <div v-if="pageData.biaoji == 18" style="height: 100%; width: 100%">
      <OrderDeliveryRate :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></OrderDeliveryRate>
    </div>
    <!-- 织厂产量   -->
    <div v-if="pageData.biaoji == 19" style="height: 100%; width: 100%">
      <TextileOutput :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></TextileOutput>
    </div>
    <!-- 班组楼层产量   -->
    <div v-if="pageData.biaoji == 20" style="height: 100%; width: 100%">
      <TeamFloorOutput :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></TeamFloorOutput>
    </div>
    <!-- 圆机开台率   -->
    <div v-if="pageData.biaoji == 21" style="height: 100%; width: 100%">
      <OpeningRateOfRoundMachine :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </OpeningRateOfRoundMachine>
    </div>
    <!-- 机台效率   -->
    <div v-if="pageData.biaoji == 22" style="height: 100%; width: 100%">
      <MachineEfficiency :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"></MachineEfficiency>
    </div>
    <!-- 厂部在岗率   -->
    <div v-if="pageData.biaoji == 23" style="height: 100%; width: 100%">
      <createFrimsDfates :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createFrimsDfates>
    </div>
    <!-- 厂部人员流失率   -->
    <div v-if="pageData.biaoji == 24" style="height: 100%; width: 100%">
      <createFrimsPosyYusbn :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </createFrimsPosyYusbn>
    </div>
    <!-- 订单准交率   -->
    <div v-if="pageData.biaoji == 25" style="height: 100%; width: 100%">
      <createFrimsPosyWsouty :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </createFrimsPosyWsouty>
    </div>
    <!-- 疵布率/降等率   -->
    <div v-if="pageData.biaoji == 26" style="height: 100%; width: 100%">
      <createFrimsPosyMacPro :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </createFrimsPosyMacPro>
    </div>
    <!-- 历史记录每天WIP   -->
    <div v-if="pageData.biaoji == 27" style="height: 100%; width: 100%">
      <createFrimsWipJusty :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </createFrimsWipJusty>
    </div>
    <!-- 实时WIP   -->
    <div v-if="pageData.biaoji == 28" style="height: 100%; width: 100%">
      <createWipSstions :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createWipSstions>
    </div>
    <!-- 拆纱卸纱机修效率   -->
    <div v-if="pageData.biaoji == 29" style="height: 100%; width: 100%">
      <createXioptions :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createXioptions>
    </div>
    <!-- 库存   -->
    <div v-if="pageData.biaoji == 30" style="height: 100%; width: 100%">
      <createWms :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createWms>
    </div>
    <!-- 织厂产量   -->
    <div v-if="pageData.biaoji == 31" style="height: 100%; width: 100%">
      <createMesCl :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createMesCl>
    </div>
    <!-- 班组楼层产量   -->
    <div v-if="pageData.biaoji == 32" style="height: 100%; width: 100%">
      <createMesLcCl :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createMesLcCl>
    </div>
    <!-- 外加工坯布库存   -->
    <div v-if="pageData.biaoji == 33" style="height: 100%; width: 100%">
      <createWfrimKc :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createWfrimKc>
    </div>
    <!-- 圆机状态   -->
    <div v-if="pageData.biaoji == 34" style="height: 100%; width: 100%">
      <createOubhgOb :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createOubhgOb>
    </div>
    <!-- 吨布漏验次数   -->
    <div v-if="pageData.biaoji == 35" style="height: 100%; width: 100%">
      <createLouYan :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createLouYan>
    </div>
    <!-- 产值工资率   -->
    <div v-if="pageData.biaoji == 36" style="height: 100%; width: 100%">
      <createCrinFrimMonly :biaoji="pageData.biaoji" @takebiaoji="takebiaoji">
      </createCrinFrimMonly>
    </div>
    <!-- 吨布五金   -->
    <div v-if="pageData.biaoji == 37" style="height: 100%; width: 100%">
      <createDunBou :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </createDunBou>
    </div>
    <!-- 织厂生产日报表   -->
    <div v-if="pageData.biaoji == 38" style="height: 100%; width: 100%">
      <zcscr :biaoji="pageData.biaoji" @takebiaoji="takebiaoji"> </zcscr>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, watch } from 'vue'
  import emitter from '@/hooks/useEventBus'
  import MachineCondition from '@/components/product/BIReport/MachineCondition.vue'
  import MachineProductCondition from '@/components/product/BIReport/MachineProductCondition.vue'
  import PlanOrderOutputDetail from '@/components/product/BIReport/PlanOrderOutputDetail.vue'
  import PlanOrderInfo from '@/components/product/BIReport/PlanOrderInfo.vue'
  import ProductionInfo from '@/components/product/BIReport/ProductionInfo.vue'
  import Rawmaterialstorage from '@/components/product/BIReport/Rawmaterialstorage.vue'
  import FinishedWarehouseMonth from '@/components/product/BIReport/FinishedWarehouseMonth.vue'
  import HardwareWarehouseMonthReport from '@/components/product/BIReport/HardwareWarehouseMonthReport.vue'
  import SurplusMaterialmonth from '@/components/product/BIReport/SurplusMaterialmonth.vue'
  import Greyclothmonth from '@/components/product/BIReport/Greyclothmonth.vue'
  import SecondaryGreymonth from '@/components/product/BIReport/SecondaryGreymonth.vue'
  import GreyDay from '@/components/product/BIReport/GreyDay.vue'
  import MeterOfClothRateDrop from '@/components/MeterOfClothRateDrop/index.vue'
  import DismantlingMachineRepairEfficiency from '@/components/DismantlingMachineRepairEfficiency/index.vue'
  import WeavingFactoryWIP from '@/components/WeavingFactoryWIP/index.vue'
  import OrderDeliveryRate from '@/components/OrderDeliveryRate/index.vue'
  import TextileOutput from '@/components/TextileOutput/index.vue'
  import TeamFloorOutput from '@/components/TeamFloorOutput/index.vue'
  import OpeningRateOfRoundMachine from '@/components/TeamFloorOutput/index2.vue'
  import createFrimsDfates from '@/components/TeamFloorOutput/index3.vue'
  import createFrimsPosyYusbn from '@/components/TeamFloorOutput/index4.vue'
  import createFrimsPosyWsouty from '@/components/TeamFloorOutput/index5.vue'
  import createFrimsPosyMacPro from '@/components/TeamFloorOutput/index6.vue'
  import createFrimsWipJusty from '@/components/TeamFloorOutput/index7.vue'
  import createWipSstions from '@/components/TeamFloorOutput/index8.vue'
  import createXioptions from '@/components/TeamFloorOutput/index9.vue'
  import createWms from '@/components/TeamFloorOutput/index10.vue'
  import createMesCl from '@/components/TeamFloorOutput/index11.vue'
  import createMesLcCl from '@/components/TeamFloorOutput/index12.vue'
  import createWfrimKc from '@/components/TeamFloorOutput/index13.vue'
  import createOubhgOb from '@/components/TeamFloorOutput/index14.vue'
  import createLouYan from '@/components/TeamFloorOutput/index15.vue'
  import createCrinFrimMonly from '@/components/TeamFloorOutput/index16.vue'
  import createDunBou from '@/components/TeamFloorOutput/index17.vue'
  import MachineEfficiency from '@/components/TeamFloorOutput/index.vue'
  // import zcscr from './components/zcscr.vue'
  import zcscr from '../../views/product/components/zcscr.vue'
  // import hightChartsGantt from '../hightChartsGantt/index.vue'
  import { useRoute } from 'vue-router'

  import { useRouter } from 'vue-router'
  import usePermission from '@/store/modules/permission'

  export default defineComponent({
    name: 'BIReport',
    components: {
      MachineCondition,
      MachineProductCondition,
      PlanOrderOutputDetail,
      PlanOrderInfo,
      ProductionInfo,
      Rawmaterialstorage,
      FinishedWarehouseMonth,
      HardwareWarehouseMonthReport,
      SurplusMaterialmonth,
      Greyclothmonth,
      SecondaryGreymonth,
      GreyDay,
      MeterOfClothRateDrop,
      DismantlingMachineRepairEfficiency,
      WeavingFactoryWIP,
      OrderDeliveryRate,
      TextileOutput,
      TeamFloorOutput,
      OpeningRateOfRoundMachine,
      MachineEfficiency,
      createFrimsDfates,
      createFrimsPosyYusbn,
      createFrimsPosyWsouty,
      createFrimsPosyMacPro,
      createFrimsWipJusty,
      createWipSstions,
      createXioptions,
      createWms,
      createMesCl,
      createMesLcCl,
      createWfrimKc,
      createOubhgOb,
      createLouYan,
      createCrinFrimMonly,
      createDunBou,
      zcscr,
      // hightChartsGantt
    },
    setup() {
      const jinru = (event: any) => {
        //emitter.emit('window-change')
        pageData.biaoji = event

        //console.log(event)
        //localStorage.setItem("eee222",event)
      }
      const pageData = reactive({
        tableIndex: '1',
        biaoji: 0,
      })
      const route = useRoute()
      if (Number(route.params.id)) {
        pageData.biaoji = route.params.id
      } else {
        pageData.biaoji = 0
      }
      watch(
        () => route.params,
        () => {
          if (Number(route.params.id)) {
            pageData.biaoji = route.params.id
          } else {
            pageData.biaoji = 0
          }
        }
      )
      const tabsChange = (e: string | number) => {
        //emitter.emit('window-change')
      }
      const takebiaoji = (item: any) => {
        //localStorage.setItem("wdbiaoji",item)
        // emitter.emit('window-change')
        pageData.biaoji = item
      }
      const shousuo = (val: any) => {
        if (val == '进存销') {
          if (jincunxiaoindex.value == 0) {
            jincunxiaobiaoji.value = 80
            jincunxiaoindex.value = 1
            jincunxiao.value = false
          } else if (jincunxiaoindex.value == 1) {
            jincunxiao.value = true
            jincunxiaobiaoji.value = 300
            jincunxiaoindex.value = 0
          }
        } else if (val == '盘点') {
          if (pandianindex.value == 0) {
            // pandian.value=false
            //  jianqu(val);
            pandian.value = false
            pandianbiaoji.value = 80
            pandianindex.value = 1
          } else if (pandianindex.value == 1) {
            //  shen(val);
            //    pandian.value=true
            pandian.value = true
            pandianbiaoji.value = 300
            pandianindex.value = 0
          }
        } else if (val == '日报') {
          if (ribaoindex.value == 0) {
            ribao.value = false
            //  jianqu(val);
            ribaobiaoji.value = 80
            ribaoindex.value = 1
          } else if (ribaoindex.value == 1) {
            //  shen(val);
            ribao.value = true
            ribaobiaoji.value = 300
            ribaoindex.value = 0
          }
        } else if (val == '业务') {
          if (yewuindex.value == 0) {
            yewu.value = false
            //  jianqu(val);
            yewubiaoji.value = 80

            yewuindex.value = 1
          } else if (yewuindex.value == 1) {
            //  shen(val);

            yewu.value = true
            yewubiaoji.value = 300
            yewuindex.value = 0
          }
        } else if (val == 'QC') {
          if (QCindex.value == 0) {
            QC.value = false
            //  jianqu(val);
            QCbiaoji.value = 80
            QCindex.value = 1
          } else if (QCindex.value == 1) {
            //  shen(val);
            QCbiaoji.value = 300
            QC.value = true
            QCindex.value = 0
          }
        } else if (val == 'BI') {
          if (Bibaoindex.value == 0) {
            Bibao.value = false
            //  jianqu(val);
            Bibaobiaoji.value = 80
            Bibaoindex.value = 1
          } else if (Bibaoindex.value == 1) {
            //  shen(val);
            Bibao.value = true
            Bibaobiaoji.value = 200
            Bibaoindex.value = 0
          }
        }

        //sessionStorage.setItem("nnnn",JSON.stringify(val))
      }
      const router = useRouter()

      let onToCilck = (path: string) => {
        router.push({ path })
      }

      let onClickRouter = (path: string) => {
        router.push({ path })
      }
      //收缩菜单
      const jianqu = (val: any) => {
        if (val == '进存销') {
          jincunxiaobiaoji.value = 300
          var timer1 = setInterval(function () {
            if (jincunxiaobiaoji.value >= 80) {
              jincunxiaobiaoji.value = jincunxiaobiaoji.value - 10
            } else {
              clearInterval(timer1)
              return
            }
          }, 5)
        } else if (val == '盘点') {
          pandianbiaoji.value = 300
          var timer2 = setInterval(function () {
            if (pandianbiaoji.value >= 80) {
              pandianbiaoji.value = pandianbiaoji.value - 10
            } else {
              clearInterval(timer2)
              return
            }
          }, 5)
        } else if (val == '日报') {
          ribaobiaoji.value = 300
          var timer3 = setInterval(function () {
            if (ribaobiaoji.value >= 80) {
              ribaobiaoji.value = ribaobiaoji.value - 10
            } else {
              clearInterval(timer3)
              return
            }
          }, 5)
        } else if (val == '业务') {
          yewubiaoji.value = 300
          var timer4 = setInterval(function () {
            if (yewubiaoji.value >= 80) {
              yewubiaoji.value = yewubiaoji.value - 10
            } else {
              clearInterval(timer4)
              return
            }
          }, 5)
        } else if (val == 'QC') {
          QCbiaoji.value = 300
          var timer5 = setInterval(function () {
            if (QCbiaoji.value >= 80) {
              QCbiaoji.value = QCbiaoji.value - 10
            } else {
              clearInterval(timer5)
              return
            }
          }, 5)
        }
      }
      //伸菜单
      const shen = (val: any) => {
        if (val == '进存销') {
          jincunxiaobiaoji.value = 80
          var timer6 = setInterval(function bb() {
            if (jincunxiaobiaoji.value <= 300) {
              jincunxiaobiaoji.value = jincunxiaobiaoji.value + 10
            } else {
              clearInterval(timer6)
              return
            }
          }, 5)
        } else if (val == '盘点') {
          pandianbiaoji.value = 80
          var timer7 = setInterval(function bb() {
            if (pandianbiaoji.value <= 300) {
              pandianbiaoji.value = pandianbiaoji.value + 10
            } else {
              clearInterval(timer7)
              return
            }
          }, 5)
        } else if (val == '日报') {
          ribaobiaoji.value = 80
          var timer8 = setInterval(function bb() {
            if (ribaobiaoji.value <= 300) {
              ribaobiaoji.value = ribaobiaoji.value + 10
            } else {
              clearInterval(timer8)
              return
            }
          }, 5)
        } else if (val == '业务') {
          yewubiaoji.value = 80
          var timer9 = setInterval(function bb() {
            if (yewubiaoji.value <= 190) {
              yewubiaoji.value = yewubiaoji.value + 10
            } else {
              clearInterval(timer9)
              return
            }
          }, 5)
        } else if (val == 'QC') {
          QCbiaoji.value = 80
          var timer10 = setInterval(function bb() {
            if (QCbiaoji.value <= 190) {
              QCbiaoji.value = QCbiaoji.value + 10
            } else {
              clearInterval(timer10)
              return
            }
          }, 5)
        }
      }
      //进存销菜单伸缩
      const jincunxiaobiaoji = ref(300)
      const jincunxiao = ref(true)
      const jincunxiaoindex = ref(0)
      //盘点菜单伸缩
      const pandianbiaoji = ref(300)
      const pandian = ref(true)
      const pandianindex = ref(0)
      //日报菜单伸缩
      const ribaobiaoji = ref(300)
      const ribao = ref(true)
      const ribaoindex = ref(0)
      //业务菜单伸缩
      const yewubiaoji = ref(300)
      const yewu = ref(true)
      const yewuindex = ref(0)
      //QC菜单伸缩
      const QCbiaoji = ref(300)
      const QC = ref(true)
      const QCindex = ref(0)
      //日报菜单伸缩
      const Bibaobiaoji = ref(200)
      const Bibao = ref(true)
      const Bibaoindex = ref(0)
      const permissionStore = usePermission()
      return {
        onClickRouter,
        pageData,
        tabsChange,
        jinru,
        takebiaoji,
        jincunxiaobiaoji,
        jincunxiao,
        shousuo,
        jincunxiaoindex,
        pandianbiaoji,
        pandian,
        pandianindex,
        ribaobiaoji,
        ribao,
        ribaoindex,
        yewubiaoji,
        yewu,
        yewuindex,
        QCbiaoji,
        QC,
        QCindex,
        onToCilck,
        permissionStore,
        Bibaobiaoji,
        Bibao,
        Bibaoindex,
      }
    },
  })
</script>
<style scoped>
  .container2 {
    height: 100vh;
  }

  .main-container {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    position: relative;
    flex-shrink: 0;
  }

  .main-container2 {
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    position: relative;
    flex-shrink: 0;
  }

  .main-container3 {
    margin: 13px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    position: relative;
    background-color: white;
    flex-shrink: 0;
  }

  .container-one {
    height: 300px;
    background-color: white;
  }

  .container-two {
    height: 300px;
    background-color: white;
  }

  .container-s {
    height: 200px;
    background-color: white;
  }

  .lie:hover {
    background-color: red;
  }

  @keyframes myfirst {
    from {
      background-color: red;
    }

    to {
      background-color: green;
    }
  }

  .IconFont:hover {
    transform: scale(1.2);
  }

  .IconFont {
    display: inline-block;
    margin: 5px 5px;
    min-width: 110px;
  }

  .tableClass {
    width: 100%;
    height: 50px;
  }
</style>
